<template>
	<view class="filter-content-main">
		<view class="filter">
			<view class="item" :class="filter_active == 0 && 'active'" @click="ckFilter(0, 'data')">日期<i class="iconfont iconxiala"></i></view>
			<!-- <view class="item" :class="filter_active == 1 && 'active'" @click="ckFilter(1, 'range')">{{time_range_name}}<i class="iconfont iconxiala1"></i></view> -->
			<!-- <view class="item" :class="filter_active == 2 && 'active'" @click="ckFilter(2, 'teacher')">授课老师<i class="iconfont iconxiala"></i></view> -->
			<view class="item" :class="filter_active == 2 && 'active'" @click="ckFilter(2, 'morefilter')">{{filter_name}}<i class="iconfont iconxiala"></i></view>
		</view>
		<!-- 日期选择 -->
		<v-date-picker :visible="show_list_select[0]" @selectTime='selectTime' @sureSubmit='sureSubmit'></v-date-picker>
		<!-- 筛选 -->
		<v-select-list :list="filter_list" :show="show_list_select[2]" @ck='ck'></v-select-list>
	</view>
</template>

<script>
import datePicker from './date-picker.vue'
import selectlist from './select-list.vue'
export default {
	components: {
		vDatePicker: datePicker,
		vSelectList: selectlist
	},
	data (){
		return {
			filter_active: -1,
			time_range_name: '全部',
			filter_list: ['综合', '价格低', '人气高', '时间近'],
			filter_name: '综合',
			show_list_select: [!1, !1, !1, !1],
		}
	},
	methods:{
		ckFilter (idx, data) {
			var old_idx = this.filter_active; // 获取当前点击的是哪种筛选类型索引
			if (old_idx != idx) this.hideAll()
			
			this.$set(this.show_list_select, idx, !!(old_idx^idx));
			this.filter_active = old_idx^idx ? idx : -1;
		},
		
		// 隐藏筛选列表
		hideAll(){
			this.show_list_select = [!1, !1, !1, !1],
			this.filter_active = -1
		},
		
		// 时间选择
		selectTime(item) {
			this.$emit('selectTime', item) // 通知父组件进行获取选择对应的数据
		},
		
		sureSubmit() {
			this.$emit('sureSubmit')
		},
		
		// 排序 的筛选
		ck(index) {
			this.filter_name = this.filter_list[index]
			this.$emit('ck', index)
			this.hideAll() // 选择后取消列表弹窗
		}
	}
}
</script>

<style scoped>
	.filter{display:flex; width:90%;margin: 0 auto 20upx; justify-content:space-between;border:1px solid #E5E5E5;background:#fff; border-radius:5px;padding:0 7px;}
	.filter .item{display:flex;margin-right:8px;line-height:32px;border-right:1px solid #E5E5E5;flex-grow:1;align-items:center;color: #333333; font-size: 26upx;}
	.filter .item i{flex: 1;margin-right:5px;text-align:right;font-size:5px;}
	.filter .item .iconxiala{color: #333333; font-size: 26upx;}
	.filter .active .iconxiala{color: #fe9900;}
	.filter .item .iconxiala1:after{content: ""; border-width: 10upx; border-style: solid dashed; position: relative; border-color: #666666 transparent transparent transparent;top: 24upx;}
	
	.filter .active{color: #fe9900}
	.filter .active .iconxiala1:after{border-color: transparent transparent #fe9900 transparent;top: -24upx;}
	.filter .item:last-child{border-right:none;margin-right:0;}
	
	.filter-content-main{padding-top: 20upx;position: relative;}
	
	.avatar{border-radius: 50%;width: 80upx;height: 80upx;overflow: hidden;margin-right: 6upx;}
	.avatar .pic{width: 100%;height: 100%;}
	.teacher-name {font-size: 32upx;}
	
</style>
